<template>
	<view style="margin-bottom: .5vh;">
		<view style="height:6vh;">
			<view
				style="width:100%;height:100%;border-bottom: 1px solid #f1f1f1;height:100%; justify-content: space-between; display: flex;align-items: center;box-sizing: border-box;">
				<view style="display: flex;align-items: center;min-width: 10vw;">
					<!-- <u-icon name="grid" color="#5d9cec" size="24"></u-icon> -->
							<image src="../static/cd.png"  style="width: 24px;height: 24px;" mode=""></image>
					<view style="margin-left: 2vw;font-weight: bolder;color: #525865;font-size: 16px;">
						{{item.TypeName}}(共{{item.QList.length}}题)
					</view>
				</view>
		<!-- 		<view style="font-weight: bolder;color: #525865;font-size: 18px;">
					共{{item.QList.length}}题
				</view>
				<view style="display: flex;align-items: center;min-width: 4vw;">

				</view> -->
			</view>
		</view>
		
		<!-- <scroll-view scroll-y :show-scrollbar="true" :scroll-with-animation="true" style="height: 175px;margin-top: 10px;"> -->
		<view style="min-height: 10vh;margin-top: 1vh;">
	

		<view style="display: flex;width: 100%; flex-wrap: wrap;align-items: flex-start;justify-content: flex-start;padding-left: 10px;box-sizing: border-box;">
			
			<view @click="handlechoose(e.SortNum,e.Id)" :class="{'normal':!e.IsChecked&&!e.IsChecked&&currentq!=e.SortNum,'collect':e.IsCollect,'active':e.IsChecked||currentq==e.SortNum}" style="width:2.6vw;font-size: 1.4vw; height:2.6vw;margin-top:3px;margin-right:.4vw; display: flex;justify-content: center;align-items: center;" v-for="(e,i) in item.QList"  :key="e.Id">
				{{e.SortNum}}
			</view>
		</view>
				</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	export default {
		props:['item','currentq'],
		name: "answerCard",
		created() {
				
		},
		data() {
			return {
			
			};
		},
			
		methods:{
		handlechoose(i,id){
			this.$emit('chooseQ',i)
			this.$emit('chooseId',id)
			
		}
		}
	}
</script>

<style lang="scss">
	.active{
			border:1px solid #5d9cec;
			background:#5d9cec;
			color:#fff
		}
		.collect{
			color: #f34950 !important;
			font-weight: bolder;
		}
		.normal{
			border:1px solid #9da0a7;
			background:#fff;
			color:#9da0a7
		}

</style>